<template>
  <div class="settingList">
    <div class="top">
      <div class="first_box pad">
        <el-input
          placeholder="请输入内容"
          v-model="filter.userName"
          class="input-with-select"
          :disabled="filter.queryType != '' ? false : true"
        >
          <el-select
            v-model="filter.queryType"
            slot="prepend"
            placeholder="请选择"
            @change="selectQueryType"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-input>
      </div>
      <div class="time pad">
        <span class="label">子账号状态：</span>
        <el-select v-model="filter.status" placeholder="请选择">
          <el-option
            v-for="item in type"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="btn pad">
        <el-button @click="setReset">重置</el-button>
        <el-button @click="search" type="primary">查询</el-button>
      </div>
    </div>
    <div class="main">
      <div class="main_top">
        <el-button size="small" type="primary" @click="addAccount"
          >新建子账号</el-button
        >
      </div>
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:operate="{ scope }">
          <el-button @click="handleEdit(scope.row.id)" size="mini" type="primary" >编辑</el-button>
          <el-button @click="handleReset(scope.row.id)" size="mini" type="primary" >重置密码</el-button>
          <el-button @click="getdelete(scope.row.id)" size="mini" type="danger"
            >删除</el-button
          >
          <el-button
            @click="disable(scope.row.id, scope.row.status)"
            size="mini"
            type="primary"
            >{{ scope.row.status == "1" ? "禁用" : "启用" }}</el-button
          >
        </template>
      </ex-table>
    </div>
    <detail-dialog
      ref="childRef"
      v-if="detailDialog"
      :id="id"
      :path="path"
      :visible.sync="detailDialog"
      @success="_handleSuccess"
    />
  </div>
</template>
<script>
// components
import DetailDialog from "./components/settingList/DetailDialog";
// api
import { getList, getDelete, setStatus, getRole,resetPassword } from "@/api/setting";

// mixins
import handlePageMixin from "@/mixins/handlePageMixin";

export default {
  name: "settingList",
  components: {
    DetailDialog,
  },
  mixins: [handlePageMixin],
  data() {
    
    return {
      loading: false,
      options: [
        { id: "", value: "全部" },
        { id: "1", value: "子账号名称" },
        { id: "2", value: "手机号" },
      ],
      type: [
        { id: 1, value: "正常" },
        { id: 2, value: "禁用" },
      ],
      tableColumn: [
        { prop: "id", label: "子账号编号" ,width: '200'},
        { prop: "nickName", label: "子账号名称" ,width: '150'},
        { prop: "userName", label: "手机号" ,width: '150'},
        { prop: "roleName", label: "角色" ,width: '100'},
        { prop: "createTime", label: "创建时间" ,width: '200'},
        { prop: "loginTime", label: "最后登录时间" ,width: '200'},
        { prop: "statusDict", label: "子账号状态" ,width: '100'},
        { label: "操作", slot: true, slotName: "operate",width: '310' },
      ],
      filter: {
        queryType: "", //
        userName: "", //帐号（手机号）
        status: "", //帐号状态( 0 正常 1 禁用)
      },
      selData: "",
      value: "",
      detailDialog: false,
      tableData: [],
      id: '',
      path: '',
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    //列表
    getList() {
      this.loading = true;
      const params = {
        ...this.filter,
        ...this.pageOptions,
      };
      getList(params)
        .then((res) => {
          const { total, records } = res.result;
          console.log("账号列表", records);
          this.$refs.table.pageOptions.total = total;
          this.tableData = records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    selectQueryType(value) {
      if (!value) {
        this.filter.userName = "";
      }
    },
    //新建子账号
    addAccount() {
      this.detailDialog = true;
      this.path = 'add'
    },
    //
    _handleSuccess(data) {
      console.log("data", data);
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
    },
    //重置
    setReset() {
      this.filter.queryType = "";
      this.filter.userName = "";
      this.filter.status = "";
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
    },
    //搜索
    search() {
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
    },
    //删除
    getdelete(id) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          getDelete(id)
            .then((res) => {
              this.handleSuccess("删除成功");
              this.getList();
            })
            .finally(() => {});
        })
        .catch(() => {});
    },
    //编辑
    handleEdit(id){
      this.id = id
      this.detailDialog = true;
      this.path = 'edit'
    },
    //重置密码
    handleReset(id){
      resetPassword(id).then((res) => {
        this.handleSuccess(`重置成功`);
        this.getList();
      })
      .finally(() => {});
    },
    //禁用
    disable(id, status) {
      var text = "";
      var type = "";
      if (status == 1) {
        text = "禁用";
        type = "2";
      } else {
        text = "启用";
        type = "1";
      }

      this.$confirm(`是否${text}?`, "提示", {
        confirmButtonText: text,
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          const params = {
            id: id,
            status: type,
          };
          setStatus(params)
            .then((res) => {
              this.handleSuccess(`${text}成功`);
              this.getList();
            })
            .finally(() => {});
        })
        .catch(() => {});
    },
    handleSuccess(msg) {
      if (msg === "已拒绝") {
        var type = "error";
      } else {
        var type = "success";
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose();
          this.$emit("success");
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./style/setting";
.el-select .el-input {
  width: 130px;
}
.first_box {
  ::v-deep :nth-child(1).el-input__inner {
    width: 100px;
  }
  ::v-deep :nth-child(2).el-input__inner {
    width: 200px;
  }
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>